<template>
    <ul class="xf-friend-box">
        <li class="xf-shadow-out" v-for="item in friendsStore.friendsInfo" :key="item.id">
            <a :href="item.link" target="_blank" rel="noopener noreferrer">
                <img v-lazy="`https://q.qlogo.cn/headimg_dl?dst_uin=${item.qq}&spec=100&img_type=png`" :alt="item.name" class="xf-shadow-out">
                <div class="xf-friend-info">
                    <h3>{{ item.name }}</h3>
                    <p>{{ item.introduced }}</p>
                </div>
            </a>
        </li>
    </ul>
</template>

<script setup lang="ts" name="Friends">
    import { useFriendsStore } from '@/store'
    const friendsStore = useFriendsStore()
</script>

<style scoped lang="less">
        .xf-friend-box {
            display: -ms-grid;
            display: grid;
            -ms-grid-columns: 1fr 2em 1fr;
            grid-template-columns: 1fr 1fr;
            grid-gap: 2em;
    
            li {
                height: 90px;
                -webkit-transition: transform .35s;
                transition: transform .35s;
    
                &:hover {
                    -webkit-transform: rotate3d(1, 1, 0, 15deg);
                    transform: rotate3d(1, 1, 0, 15deg);
                }
    
                &:active {
                    -webkit-box-shadow: var(--nitai5-shadow-int);
                    box-shadow: var(--nitai5-shadow-int);
                }
    
                a {
                    width: 100%;
                    height: 100%;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -ms-flex-pack: distribute;
                    justify-content: space-around;
                    padding: 0 .5em;
    
                    img {
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                    }
    
                    .xf-friend-info {
                        height: 65px;
                        width: 85px;
                        margin-left: .35em;
                        text-align: left;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3;
                        overflow: hidden;
    
                        h3 {
                            font-size: 1rem;
                            font-weight: bold;
                        }
                    }
                }
            }
        }

        .xf-night .xf-friend-box li {
            a .xf-friend-info h3 {
                color: var(--nitai5-color-3);
            }

            &:hover {
                color: var(--xf-color-8);
            }

            &:active {
                -webkit-box-shadow: var(--nitai5-shadow-int-dark);
                box-shadow: var(--nitai5-shadow-int-dark);
            }
        }
</style>